<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>通用型方法ajax</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelectorAll("button");
        const result = document.querySelector("#result");

        $("button").eq(0).click(function() {
            // 4个参数，分别是url、请求时可携带的参数、用于处理响应体的回调函数、是否设置为js对象
            $.get("http://127.0.0.1:8000/jquery-server",{a:100, b:200},function(data) {
                console.log(data);  // 这里的data是一个js的对象
            },"json");
        });

        $("button").eq(1).click(function() {
            // 4个参数，分别是url、请求时可携带的参数、用于处理响应体的回调函数、是否设置为js对象
            $.post("http://127.0.0.1:8000/jquery-server",{a:100, b:200},function(data) {
                console.log(data);  // 这里的data是一个js字符串
            });
        });

        $("button").eq(2).click(function() {
            // 该方法传递一个对象作为参数
            $.ajax({
                url: "http://127.0.0.1:8000/jquery-server",
                data: {a:100, b:200},  // 携带的参数
                type: "GET",  // 请求的类型
                // 设置响应的格式
                dataType: "json",
                // 设置超时时间
                timeout: 2000,
                // 成功的回调函数
                success: function(data) {
                    console.log(data);
                },
                // 失败的回调函数
                error: function() {
                    console.log("出错了！！！");
                },
                // 头部的信息
                headers: {
                    c: 300,
                    d: 400
                }

            })
        });
    </script>
</body>
</html>